<template>
	<view class="out">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 600px;"  :latitude="latitude" :longitude="longitude" :markers="covers" @callouttap="callouttap" >
				</map>
			</view>
		</view>
		<view class="buttom">

			<view class="top">
				<view class="left">
					<!-- 标题 -->
					<view class="title">
						伟业汽车维修(人民路店)
					</view>
					<!-- 下面文字 -->
					<view class="time">
						<view class="">
							山阳区人民中路32号
						</view>
					</view>
				</view>
				
				
				<view class="right">
					<img src="../../../static/nav.png" alt="" />
				</view>
			</view>

	
		</view>
		
		
	
	</view>

</template>
<script>
	export default {
		data() {
			return {
				 show: false,
				type: 'center',
				rateValue: 0,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.901319,
				longitude: 116.394692,
				covers: [{
					    id:0,
						title: '当前位置',
						latitude: 39.901319,
						longitude: 116.394692,
						iconPath: '../../../static/currentPositioning.png',
						width: 24,
						height: 26,
						callout: {
							display: 'ALWAYS',
							fontSize: 15,
							content: '当前位置', //文本
							color: '#ffffff', //文本颜色
							borderRadius: 3, //边框圆角
							borderWidth: 1, //边框宽度
							borderColor: '#FF0202', //边框颜色
							bgColor: '#414141', //背景色
							padding: 5, //文本边缘留白
							textAlign: 'center' //文本对齐方式。有效值: left, right, center
						}
					}
				]
			}
		},
		onLoad() {
		
		},
		methods: {
			onChange(e) {
				//console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			}
		}
	}
</script>
<style lang="scss">
	.buttom {
		background-color: #ffffff;
		width: 100%;
		height: 180rpx;
		position: fixed;
		bottom: 0;
	}
	.top {
		padding-left: 45rpx;
		background-color: #ffffff;
		width: 100%;
		height: 225rpx;
		display: flex;
	}

	.left {
		padding-top: 15rpx;
		width: 500rpx;
		background-color: #ffffff;
		height: 210rpx;
	}

	.title {
		line-height: 60rpx;
		font-weight: 1000;
		font-size: 31rpx;

	}

	.time {
		font-size: 27rpx;
		line-height: 50rpx;
		font-weight: 600;
	}

	.dibu {
		padding-left: 50rpx;
		height: 100rpx;

	}

	.right > img{
		margin-left: 20px;
		width: 134rpx;
		margin-top: 8px;
	}

	

	.distance {
		margin-top: 10rpx;
		text-align: center;
		font-weight: 700;
		height: 70rpx;
	}

	
</style>